<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box"style="display: flex;align-items: center;justify-content: center;margin:100px;">
        <button   @click="jian" :disabled="c <= 1">-</button>
        <p>{{c}}</p>
        <button  @click="jia" :disabled="c >= 10" >+</button>

    </div>
    
</body>
<script src="./vue.js"></script>
<script>
    const {createApp,ref} = Vue;
createApp({
    setup(){
        let c = ref(1);
        const jia = () => {  
            if (c.value < 10) {  
                c.value++;  
            }  
        };  
        const jian = () => {  
            if (c.value > 1) {  
                c.value--;  
            }  
        };  
       
        return{
            c,
            jia,
            jian
    }
    }
   
}).mount('#box')

</script>
</html>